<template>
    <div class="head">
        <div class="wrapper">
            <div class="logo">

            </div>
            <div class="category">
                <ul >
                    <li @click="toHomeHandler(),selectStyle(1)" :class="{title:currentIndex==1}">沐阳旅游</li>
                    <li @click="goScenic(),selectStyle(2)" :class="{title:currentIndex==2}">旅游景点</li>
                    <li @click="goTourist(),selectStyle(3)" :class="{title:currentIndex==3}">游记</li>
                    <li @click="goFood(),selectStyle(4)" :class="{title:currentIndex==4}">当地小吃</li>
                </ul>
            </div>
            <div class="contact" @click="goRegister()" v-show="!isLogin">注册</div>
            <div class="contact" @click="goLogin()" v-show="!isLogin">登录</div>
            <div class="contact" @click="exit()" v-show="isLogin">退出</div>
            <div class="contact" @click="goPerson()" v-show="isLogin">个人中心</div>
            <div class="contact2" v-show="isLogin" style="width: 250px">
                <marquee direction="left" behavior="alternate" scrollamount="5">
                <span v-model="remark" style="color: red">{{remark}}</span>
                <span v-model="username">{{username}},欢迎您</span></marquee>
            </div>
        </div>
    </div>
</template>

<script>
    import {get, getInfo,removeToken,getToken} from "@/utils/request";

    export default {
        data() {
            return {
                isLogin: false,
                username: "",
                remark:'',
                currentIndex: 1,
                typeArray: ['沐阳旅游', '旅游景点', '游记','当地小吃']
            };
        },
        methods: {
            // 跳转注册
            goRegister() {
                // 跳转页面
                this.$router.push({path: '/register'})
            },
            //  跳转登录
            goLogin() {
                // 跳转页面
                this.$router.push({path: '/login'})
            },
            //跳转到首页
            toHomeHandler() {
                this.$router.push({path: '/home'})
            },
            //跳转到个人
            goPerson() {
                this.$router.push({path: '/person'})
            },//跳转到景点
            goScenic() {
                this.$router.push({path: '/scenic'})
            },//跳转到游记
            goTourist() {
                this.$router.push({path: '/travels'})
            },//跳转到小吃
            goFood() {
                this.$router.push({path: '/food'})
            },
            exit(){
                this.$router.push({path: '/login'});
                removeToken();
            },
            selectStyle (index) {
                this.currentIndex = index;
            },
            getUser() {
                // getToken();
                let a = undefined;
                if (a!==getToken()){
                    getInfo().then(res => {
                        if (res.code === 200) {
                            this.isLogin = true;
                            this.username = res.user.nickName
                            this.remark=res.user.remark
                        }
                    });
                }


            }
        },
        created() {
            this.getUser()
        }
    };
</script>

<style scoped lang='scss'>
    .head {
        box-shadow: 0 1px 5px #f4f4f4;
        padding: 0.8em;
    }

    .wrapper {
        width: 90%;
        height: 60px;
        line-height: 60px;

        .logo {
            float: left;
            cursor: pointer;
        }
        .title {
            float: left;
            font-size: 20px;
            font-weight: bolder;
            padding: 0 1em;
            cursor: pointer;
        }
        .category {
            font-size: 1.2em;
            float: left;
            ul li {
                float: left;
                padding: 0 2em;
                cursor: pointer;
            }
        }
        .contact {
            float: right;
            cursor: pointer;
            padding-left: 20px;
        }
        .contact2 {
            float: right;
            cursor: pointer;
        }
    }
</style>
